<template>
    <el-container class="home-container">
        <!--头部区域-->
          <el-header>
              <div>
                  <span>新世界管理后台</span>
              </div>
              <div>
                  <el-button type="danger" @click="logout">退出</el-button>
              </div>
          </el-header>
          
          <el-container>
            <!--左侧菜单栏-->
            <el-aside style="width:120px;height: 600px;">
              <el-menu
                    :default-active="activePath"
                    class="el-menu-vertical-demo"
                    :router="true"
                    text-color="black"
                    active-text-color="red"
                    style="height: 600px;"
                    >
                      <el-menu-item :index="item.path" v-for="item in menuList" :key="item.id" @click="changeActive(item.path)">
                        <template #title>
                          <!--图标组件 -->
                          <component :is="objIcon[item.id]"
                            style="width: 20px; height:20px; margin-right: 5px;"/>
                           <span>{{ item.authName }}</span>                       
                        </template>
                        
                      </el-menu-item>
                 </el-menu>
              </el-aside>

            <el-main style="overflow: hidden;">
              <!--动态组件-->
              <router-view></router-view>
            </el-main>
          </el-container>
      </el-container>
  </template>
  
  <script>
  export default {
    name: 'Management',
    data() {
        return {
          menuList:[
            {id:102,authName:'文章管理',path:'articlemanage'},
            {id:145,authName:'视频管理',path:'videomanage'},
            {id:103,authName:'评论管理',path:'discussmanage'},
            {id:101,authName:'用户管理',path:'usermanage'}
          ],
          objIcon:{
           "103":"Promotion",
           "102":"List",
           "145":"PieChart",
           "101":"User",
          },
          activePath:''
        };
      },
    components: {
    },
    methods:{
      logout(){
            sessionStorage.removeItem('token');
            this.$router.push('/login');
        },
        //点击二级菜单激活当前index值
        changeActive(path){
            //path是当前请求路径
            console.log(path);
            this.activePath = path;
        }
      },
      created () {
         
      }
  }
  </script>
  <style scoped>
    .home-container {
      height: 100%;
    }
  
    .el-header {
      line-height: 60px;
      color: black;
      font-size: 22px;
      display: flex;
      justify-content: space-between;
      background-color: #f8f8f8;
    }

  </style>
  